<template>
  <div style="width: 500px; margin: 5px auto">
    <el-card style="margin-top: 100px">
      <h2>操作员注册</h2>
      <el-form
        :model="form"
        ref="form"
        :rules="rules"
        label-width="80px"
        :inline="false"
        size="normal"
      >
        <el-form-item label="用户名" prop="UserName">
          <el-input placeholder="用户名" v-model="form.UserName"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="UserPassword">
          <el-input
            show-password
            placeholder="密码"
            v-model="form.UserPassword"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="Password2">
          <el-input
            show-password
            placeholder="确认密码"
            v-model="form.Password2"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="Name">
          <el-input v-model="form.Name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="UserPhone">
          <el-input
            maxlength="11"
            placeholder="手机号"
            v-model="form.UserPhone"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="Email">
          <el-input v-model="form.Email" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('form')">注册</el-button>
          <el-button @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //字段
      form: {
        UserName: "",
        UserPassword: "",
        Password2: "",
        Name: "",
        UserPhone: "",
        Email: "",
      },

      //判断验证
      rules: {
        UserName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        UserPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
        Password2: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
        ],
        Name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        UserPhone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
        ],
        Email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
      },
    };
  },
  methods: {
    //注册
    onSubmit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.axios
            .post("https://localhost:44375/api/UserInfo/AddUserInfo", this.form)
            .then((res) => {
              if (res.data.Code == 1) {
                this.$message.success(res.data.Message);
                this.$router.push("/");
              } else {
                this.$message.error(res.data.Message);
              }
            });
        }
      });
    },

    //登录
    login() {
      this.$router.push("/");
    },
  },
  created() {},
};
</script>
<style>
</style>